<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.ProgrammeDetail"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <table id="styled-table">
          <tr>
            <td style="width: 200px">
              <span>{{ dataList.ProgrammeNumber }}</span>
            </td>
            <td>
              <span>{{ from.num }}</span>
            </td>
            <td style="width: 200px">
              <span>{{ dataList.ProgrammeName }}</span>
            </td>
            <td>
              <span>{{ from.name }}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span>{{ dataList.PreparedName }}</span>
            </td>
            <td>
              <span>{{ from.preparedName }}</span>
            </td>
            <td>
              <span>{{ dataList.PreparedDate }}</span>
            </td>
            <td>
              <span>{{ from.preparedDate }}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span>{{ dataList.Deviceremark }}</span>
            </td>
            <td>
              <span>{{ from.remark }}</span>
            </td>
            <td></td>
            <td></td>
          </tr>
        </table>
        <br />
        <el-table
          :data="listData"
          element-loading-text="Loading"
          height="430"
          fit
          highlight-current-row
        >
          <el-table-column :label="dataList.DeviceNumber">
            <template slot-scope="scope">
              {{ scope.row.deviceNum }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
            "
          >
            <template slot-scope="scope">
              {{ scope.row.deviceName }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceSpecifications">
            <template slot-scope="scope">
              {{ scope.row.specifications }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.CalibrationObject">
            <template slot-scope="scope">
              {{ scope.row.calibrationObject }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.CalibrationWay">
            <template slot-scope="scope">
              {{ scope.row.calibrationWay }}
            </template>
          </el-table-column>
        </el-table>
        <!-- <BasePagination
          :total="pagination.total"
          :current-page="pagination.pageIndex"
          :page-count="pagination.total"
          @changePage="changePage"
          @sizeChange="sizeChange"
        /> -->
      </div>

      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="Export">{{
          dataList.Export
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../../api/DeviceCalibration.js";
import { export_json_to_excel } from "@/vendor/Export2Excel";
export default {
  name: "DeviceCalibrationViewDialog",
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tHeader: [
        this.$t("ModuleDevice.Device.DeviceNumber"), // "设备编号",
        this.$t("ModuleDevice.Device.DeviceName"), // "设备名称",
        this.$t("ModuleDevice.Device.DeviceSpecifications"), // "型号规格",
        this.$t("ModuleDevice.Device.CalibrationObject"), // "检定/校准规程",
        this.$t("ModuleDevice.Device.CalibrationWay"), // "检定/校准项目",
      ],
      filterVal: [
        "deviceNum",
        "deviceName",
        "specifications",
        "calibrationObject",
        "calibrationWay",
      ],
      listData: [],
      innerDialogFormVisible: false,
      loading: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      from: {
        num: "",
        name: "",
        preparedName: "",
        preparedDate: "",
        remark: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.getList();
  },
  methods: {
    getList() {
      get({ id: this.id }).then((res) => {
        this.from = res.data;
        this.listData = res.data.deviceDtos;
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    export_json_to_excel,
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    // 导出
    Export() {
      var data = this.formatJson(this.filterVal, this.listData);
      export_json_to_excel({
        header: this.tHeader, // 表头
        data, // 数据
        filename: this.$t("ModuleDevice.Device.CalibrationProgrammeList"), // "校准方案清单", // 导出文件名
        autoWidth: true, // 导出宽度自动
        bookType: "xlsx", // 导出后缀
      });
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.cancel();
    },
  },
};
</script>
<style scoped>
table {
  border-collapse: collapse; /* 合并边框，使其一致 */
  width: 100%;
}
table,
th,
td {
  border: 1px solid gainsboro; /* 设置边框的样式 */
  padding: 8px; /* 可选：设置单元格的内边距 */
}
td {
  text-align: center; /* 水平居中对齐 */
  vertical-align: middle; /* 垂直居中对齐 */
}
#styled-table2 tr:first-child {
  background-color: ghostwhite;
}

#styled-table td:nth-child(1),
#styled-table td:nth-child(3) {
  background-color: ghostwhite;
}
</style>
